<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <title>emplist</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">
                <p>
                    2009/11/20
                    <br/>
                    <!--这是什么意思？-->
                    <a href="javascript:;" @click="logout">安全退出</a>
                </p>
            </div>
            <div id="topheader">
                <h1 id="title">
                    <a href="/ems_vue/emplist.html">main</a>
                </h1>
            </div>
            <div id="navigation">
            </div>
        </div>
        <div id="content">
            <p id="whereami">
            </p>
            <h1>
                Welcome {{user.username}}!
                <!--						<el-button>ele案件</el-button>-->
            </h1>
            <table class="table">
                <tr class="table_header">
                    <td>
                        ID
                    </td>
                    <td>
                        Name
                    </td>
                    <td>
                        Photo
                    </td>
                    <td>
                        Salary
                    </td>
                    <td>
                        Age
                    </td>
                    <td>
                        Operation
                    </td>
                </tr>
                <!--循环-->
                <tr v-for="(emp,index) in emp" :key="emp.id" :class="index%2==0?'row1':'row2'">
                    <td>
                        {{emp.id}}
                    </td>
                    <td>
                        {{emp.name}}
                    </td>
                    <td>
                        <img :src="'/ems_vue/'+emp.path" style="height: 40px;">
                    </td>
                    <td>
                        {{emp.salary}}
                    </td>
                    <td>
                        {{emp.age}}
                    </td>
                    <td>
                        <a href="javascript:;" @click="delEmp(emp.id)">delete emp</a>&nbsp;<a
                            :href="'/ems_vue/updateEmp.html?id='+emp.id">update
                        emp</a>
                    </td>
                </tr>
            </table>

            <el-row>


                <el-col  :span="12">
                    <p>
                        <input type="button" class="button" value="Add Employee" onclick="location='addEmp.html'"/>

                    </p>
                </el-col>

                <el-col  :span="12">


                    <el-pagination
                            layout="prev, pager, next"
                            :total=totals
                            :page-size="2"
                            :page-count=pagecount
                            @current-change="findPage"
                    >
                    </el-pagination>
                </el-col>
            </el-row>


        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">
            ABC@126.com
        </div>
    </div>
</div>
</body>
</html>
<script src="/ems_vue/js/vue.js"></script>
<!--<script src="/ems_vue/js/elementui.js"></script>-->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script src="/ems_vue/js/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#wrap",
        data: {
            user: {},
            emp: [],
            pagecount: '',
            totals:''
        },
        methods: {
            logout() {
                localStorage.removeItem("user");
                location.reload(true);
            },
            //删除员工
            // 如果在axios中使用this，需要提前定义备份好this对象为_this，axios会改变this指向
            delEmp(date) {

                if (window.confirm("确定删除吗")) {

                    axios.get("http://localhost:8998/ems_vue/emp/delete?id=" + date).then(function (res) {
                        console.log(res.data.stata);
                        if (res.data.stata) {
                            location.reload(true);
                        } else {
                            alert(res.data.msg)
                        }
                    })
                }


            },
            findPage(date){ //处理分页
                console.log(date);
                this.pageNow = date;
                console.log(this.pageNow+"----------");
                var _this = this;
                axios.get("http://localhost:8998/ems_vue/emp/findByPage?pageNow=" +_this.pageNow).then(function (res) {
                    console.log(res.data);
                    _this.emp = res.data.users;
                    // _this.pagecount = res.data.pageCount;
                    _this.totals = res.data.totals;

                })
            }

        },
        created() {
            var userString = localStorage.getItem("user");
            console.log(userString + "1");
            if (userString) {
                console.log(userString + "2");
                this.user = JSON.parse(userString);
            } else {
                alert("您尚未登录，点击确定登录");
                location.href = "/ems_vue/login.html";
            }

            var _this = this;
            axios.get("http://localhost:8998/ems_vue/emp/findByPage?pageNow=1").then(function (value) {
                console.log(value.data);
                _this.emp = value.data.users;
                // _this.pagecount = res.data.pageCount;
                _this.totals = value.data.totals;
            })


        }


    })


</script>
